<template>

  <el-container>
    <div class="qrcode_box">
      <canvas id="canvas" ref="qrcodeCanvas" class="qrcode"></canvas>
      <div style="color: #409EFF">请使用微信支付</div>
    </div>
  </el-container>

</template>

<script>
import QRCode from "qrcode";
import {wxTransactions} from "@/api/wxAccounts";

export default {
  name: "index",
  data() {
    return {
      codeUrl: this.$route.query.codeUrl,
      outTradeNo: this.$route.query.outTradeNo,
      intervalId: null,

    }
  },
  created() {
    this.$nextTick(() => {
      const canvas = document.getElementById('canvas')
      console.log("这是收到的coderUrl", this.codeUrl)
      var text = this.codeUrl
      const ctx = canvas.getContext('2d')
      QRCode.toCanvas(canvas, text, error => {
        if (error) console.log(error)
      })
    })
    this.startPolling()
  },
  destroyed() {
    this.stopPolling()
  },
  methods: {
    startPolling() {
      this.intervalId = setInterval(this.interPaymentWx, 2000); //每两秒更新一次
    },
    stopPolling() {
      if (this.intervalId) clearInterval(this.intervalId)
    },
    //查询订单状态
    interPaymentWx() {
      wxTransactions({
        out_trade_no: this.outTradeNo
      }).then(res => {
        let trade_state = res.data['trade_state']
        if (trade_state === 'SUCCESS') {
          this.$message({
            message: '支付成功,跳转中...',
            type: 'success'
          })
          setTimeout(()=> {
            this.$router.back();
          }, 1500)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

.qrcode_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  .qrcode {
    width: 270px !important;
    height: 270px !important;
  }
}

</style>
